iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Modern Web

自動化 End-End 測試 Nightwatch.js系列 第 2

自動化 End-End 測試 Nightwatch.js 之踩雷筆記:檢查顏色

  • 分享至 

  • xImage
  •  

cssProperty() ?

對於寫 E2E 檢查顏色是否正確應該是再平凡不過的事了,當然 Nightwatch.js 其實也內建了 cssProperty 一系列的指令:

  • assert/verify[.not].cssProperty()
  • getCssProperty()

用法也相當簡單,cssProperty() 帶入 selector, property 以及要驗證的顏色即可,並且會回傳一個 true/false,並在 console 中會有打勾勾與預設的文字。

getCssProperty() 則是將最後一個要驗證的顏色改為 callback function,並可以自行建立較複雜的驗證。

cssProperty()

寫法範例:
https://ithelp.ithome.com.tw/upload/images/20210917/20120250FX1RnzOFn1.png

執行結果:
https://ithelp.ithome.com.tw/upload/images/20210917/20120250hANzmxElhd.png

看起來很正常簡單,但遇到其他瀏覽器就不一定了:
https://ithelp.ithome.com.tw/upload/images/20210917/20120250JvI67cCbXp.png

有趣的是,即便點開 devtool 中檢查元素,顏色也會由 hex 轉成 rgb 或 rgba
且只有 FirefoxSafari 才會有這個問題。

解決方法

既然已經知道單純使用 cssProperty() 驗證顏色失敗,那麼就用 getCssProperty() 自己做一個吧!

checkColorSafe()

先前提到 getCssProperty() 可以將 Nightwatch 讀到的顏色轉為 rgb/rgba,並放入一個 callback function,因此:

https://ithelp.ithome.com.tw/upload/images/20210917/20120250ZLYv3sPl2o.png

透過簡單的檢查與替換,便可以完成:

https://ithelp.ithome.com.tw/upload/images/20210917/20120250vJHm4GUUmn.png

當然,寫在測試的檔案是絕對沒有問題的。只不過 Nightwatch 是可以將常用的指令模組化,建立自己的客製化指令。並會在明天的內容做個簡單的 demo.


上一篇
自動化 End-End 測試 Nightwatch.js 之踩雷筆記:前言
下一篇
自動化 End-End 測試 Nightwatch.js 之踩雷筆記:檢查顏色 II
系列文
自動化 End-End 測試 Nightwatch.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言